<template>
  <a-drawer :title="title" :maskClosable="true" width=650 placement="right" :closable="true" @close="close"
    :visible="visible" style="overflow: auto;padding-bottom: 53px;">
    <a-form>
      <a-form-item :label="$t('message.The_permissions_one_possesses')">
        <a-tree checkable :checkedKeys="checkedKeys" @check="onCheck" :treeData="treeData" @expand="onExpand"
          @select="onTreeNodeSelect" :selectedKeys="selectedKeys" :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">{{$t('message.Father-son_relationship')}}</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">{{$t('message.Unassociation')}}</a-menu-item>
          <a-menu-item key="3" @click="checkALL">{{$t('message.Check_all')}}</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">{{$t('message.Cancel_all_selections')}}</a-menu-item>
          <a-menu-item key="5" @click="expandAll">{{$t('message.Expand_all')}}</a-menu-item>
          <a-menu-item key="6" @click="closeAll">{{$t('message.Merge_all')}}</a-menu-item>
        </a-menu>
        <a-button>
          {{$t('message.Tree_operation')}} <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm :title="$t('message.Merge_all')+'？'" @confirm="close" :okText="$t('message.Confirm')" :cancelText="$t('message.Cancel')">
        <a-button style="margin-right: .8rem">{{$t('message.Cancel')}}</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">{{$t('message.Save')}}</a-button>
    </div>
  </a-drawer>

</template>

<script>
import { getAction, putAction } from '../../../../api/manage';

export default {
  name: 'RolePermission',
  data() {
    return {
      treeData: [],
      model: {},
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,
      title:this.$t('message.Role_permission_configuration'),
      visible: false,
      loading: false,
      selectedKeys: [],
      roleId: '',
      url: {
        save: "/orgPermission/saveRolePermissionList",
        get: "/orgPermission/queryRolePermission",
        listPermission: "/orgPermission/listPermission"
      }
    }
  },
  created() {
  },
  watch: {},
  methods: {
    init(roleId, roleName) {
      this.roleId = roleId
      this.loadData()
    },
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
    },
    onCheck(o) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked;
      } else {
        this.checkedKeys = o
      }
    },
    close() {
      this.reset()
      this.$emit('close');
      this.visible = false;
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.loading = false
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeysss = []
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.loading = false
    },
    loadData() {
      getAction(this.url.listPermission).then((res) => {
        this.treeData = res.result.treeList
        this.allTreeKeys = res.result.ids
        // 加载数据
        getAction(this.url.get, { roleId: this.roleId }).then((res) => {
          this.checkedKeys = [...res.result];
          this.defaultCheckedKeys = [...res.result];
          this.expandedKeysss = this.allTreeKeys;
        })
      })
    },

    handleSubmit() {
      let that = this;
      let params = {
        roleId: that.roleId,
        permissionIds: that.checkedKeys.join(","),
      };
      that.loading = true;
      putAction(this.url.save, params).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loading = false;
          this.loadData();
        } else {
          that.$message.error(res.message);
          that.loading = false;
        }
      })
    },
  },

}
</script>

<style scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>